@use "../../assets/scss/mixins/figure/avatar" as mx;

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  img {
    @include mx.avatar(130px, 3px, #0aa);
  }
}

.square {
  img {
    @include mx.rhombus;
    //   --s: min(50vw, 360px);
    //   width: var(--s);
    //   aspect-ratio: 1;
    //   object-fit: cover;
    //   object-position: top;
    //   box-sizing: border-box;
    //   padding: calc(var(--s) / 4) calc(var(--s) / 8) 0;
    //   background: conic-gradient(
    //     from 135deg at 50% 15%,
    //     #e0dee1,
    //     #28a6b5 25%,
    //     #0000 0
    //   );
    //   clip-path: polygon(-50% 0, 150% 0, 50% 100%);
    //   cursor: pointer;
    //   transition: padding 0.5s;
    //   &:hover {
    //     padding: 0;
    //   }
  }
}

.shadow {
  width: 100px;
  height: 100px;
  background-color: red;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
